<template>
	<view class="content">
		<template v-if="vuex_OSPlat=='ios'">
			<u-navbar :is-back="false" title="" :background="{ background: '#f1f1f1'  }">
				<view class="slot-wrap-full">
					<view  style="width: 100%;margin-left: 70rpx;padding-left:20rpx;">
						<view v-if="dataLoading==false"
							style="font-size: 34rpx;font-weight: bold;color: #404133;text-align: center;">
							{{navbarTitle}}
						</view>
						<view v-else class="u-flex u-row-center u-col-center">
							<view class="u-m-r-10">
								<u-loading mode="circle" color="#19be6b"></u-loading>
							</view>
							<view style="font-size: 34rpx;font-weight: bold;color: #404133;text-align: center;">收取中</view>
						</view>
					</view>
					<view  class="slot-wrap" slot="right">
						<u-icon name="/static/image/chat/add.png" :size="40" color="#000000" @click="showSelect"></u-icon>
					</view>
				</view>
			</u-navbar>
		</template>
		<template v-else>
			<u-navbar :is-back="false" :title="navbarTitle" title-color="#000000" title-bold title-size="36"
				:background="{ background: '#f1f1f1'}" :height="44">
				<view class="u-flex u-row-around u-col-center  u-p-30" slot="right">
					<view class="u-m-r-30">
						<u-icon class="u-clear-icon" @click="toSearch()" :size="46" name="search"
							color="#606266"></u-icon>
					</view>
					<view>
						<u-icon name="plus-circle" :size="46" color="#606266" @click="showSelect"></u-icon>
					</view>
				</view>
			</u-navbar>
		</template>
		<selectInput :list="selectList" :list-key="'name'" :show.sync="selectShow" @on-select="checkSelect"
			@close="closeSelect" />
		<scroll-view  :style="'height:'+scrollViewHeight+'px'"
			:refresher-triggered="refresherTriggered"
			refresher-default-style="none"
			:refresher-enabled="true" @refresherrefresh="toFullScreen()" 
			:scroll-x="false" :scroll-y="true"
			class="hidden-scroll-bar">
			<!-- ios搜索框区域 -->
			<template v-if="vuex_OSPlat=='ios'">
				<view class="u-flex u-row-center u-col-center u-m-16" @click="toSearch()"
					style="background-color: #FFFFFF;height: 80rpx;border-radius: 4rpx;color: #c0c0c0;">
					<view class="u-m-r-20">
						<u-icon class="u-clear-icon" top="6rpx" :size="40" name="search" color="#c0c0c0"></u-icon>
					</view>
					<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
				</view>
			</template>
			<!-- 群列表区域 -->
			<template v-if="myGroupList.length<1">
				<view v-if="dataLoading==false" style="position: absolute;bottom: 500rpx;width: 100%;">
					<u-empty text="暂无聊天群组" mode="message"></u-empty>
				</view>
			</template>
			<template v-else>
				<view  class="u-border-top">
					<view v-for="(group, index) in myGroupList" :key="index">
						<template v-if="group.groupUser.hiddenFlag!=1">
							<u-swipe-action :show="group.groupUser.showOptionFlag" 
									:index="index" 
									:key="group.imGroup.groupId" 
									btn-width="160" 
									@click="clickOption" 
									@open="openOption" 
									:options="options">
								<template v-if="group.groupUser.topFlag==1">
									<group-item :group="group" :topFlag="true" @resetUnreadNum="resetUnreadNum"></group-item>
								</template>
								<template v-else>
									<group-item :group="group" :topFlag="false"  @resetUnreadNum="resetUnreadNum"></group-item>
								</template>
							</u-swipe-action>
						</template>
					</view>
				</view>
			</template>
		</scroll-view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import searchInput from '@/components/searchInput/index.vue';
	import selectInput from '@/components/selectInput/selectInput.vue';
	import groupItem from '@/components/chat-item/group-item.vue';
	export default {
		components: {
			searchInput,
			selectInput,
			groupItem
		},
		data() {
			return {
				pageNumber:1,
				pageSize:100,
				selectShow: false,
				selectList: [{
						id: '1',
						name: '发起群聊',
						icon: '/static/image/chat/option-1.png'
					},
					{
						id: '2',
						name: '添加朋友',
						icon: '/static/image/chat/option-2.png'
					},
					{
						id: '3',
						name: '扫一扫',
						icon: '/static/image/chat/option-3.png'
					},
					{
						id: '4',
						name: '收付款',
						icon: '/static/image/chat/option-4.png'
					}
				],
				refresherTriggered:false,
				scrollViewHeight: 0,
				navbarTitle: '微信',
				dataLoading: false,
				tabbarCount:0,
				myGroupList: [],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d',
							fontSize: '24rpx'
						}
					}
				],	
			};
		},
		created: function() {
			let windowHeight = this.$u.sys().windowHeight;
			this.windowHeight = windowHeight;
			this.scrollViewHeight = windowHeight - uni.getSystemInfoSync().statusBarHeight -45;
			/* let key=this.vuex_userInfo.id+"_groupList";
			let localGroupList= uni.getStorageSync(key);
			if(localGroupList){
				this.myGroupList=JSON.parse(localGroupList);
			} */
		},
		onLoad: function() {
			let that = this;
			//获取群组列表
			this.getMyChatGroupList();
			//监听新的信息,监听事件来自于全局socket信息处理文件message.js
			uni.$on("updateGroupList", function(newMessage) {
				that.getMyChatGroupList();
			});
		},
		onShow:function() {
			this.refresherTriggered=false;	
		},
		
	
		methods: {
			toFullScreen:function(){
				let that=this;
				console.log("x下拉事件");
				this.refresherTriggered=true;
				this.dataLoading=false;
				uni.navigateTo({
					url:'/pages/u-full-screen/u-full-screen',
					animationType:'slide-in-top',
					animationDuration:700,
					complete:function(){
						that.refresherTriggered=false;
					}
				})
				/* this.$u.route({
					url:"/pages/u-full-screen/u-full-screen",
					animationType:'slide-in-top',
					animationDuration:700
				});
				return; */
			},
			
			//打开或者关闭弹窗
			showSelect() {
				this.selectShow = !this.selectShow;
			},
			//关闭弹窗
			closeSelect() {
				//小程序兼容
				this.selectShow = false;
			},
			//点击选择菜单
			checkSelect(index) {
				let that = this;
				switch (index) {
					case 0:
						that.$u.route({
							url: '/pages/tabbar/group/launchChat',
							params:{type: "1"}
						})
						break;
					case 1:
						that.$u.route({
							url: '/pages/tabbar/contact/to-add-friend-index',
							params: {}
						})
						break;
					case 2:
						that.globalUtil.scanQRcode(that,{
							complete(result){
								if(result==null){
									return;
								}
								console.log("扫码结果",result);
								let expireTime= result.expireTime;
								let createTimeStamp=result.createTimeStamp;
								let serviceCode=result.serviceCode;
								//个人信息
								if(serviceCode==2){
									let mobile= result.mobile;
									return;
								}else{
									
								}
							}
						});
					default:
						break;
				}
			},
			//跳转搜索
			toSearch: function() {
				this.$u.route({
					url: '/pages/search/common-search'
				})
			},
			//获取群组列表
			getMyChatGroupList: function() {
				let that = this;
				that.dataLoading = true;
				let key=that.vuex_userInfo.id+"_groupList";
				let param = {
					pageNumber:that.pageNumber,
					pageSize:that.pageSize
				};
				that.$u.api.chatGroup.getMyChatGroupList(param).then(res => {
					if (res.code == 200) {
						let totalUnreadNum=0;
						let data = res.data;
						if (data.length > 0) {
							that.myGroupList=[];
							for (var i = 0; i < data.length; i++) {
								let groupData = data[i];
								let groupId =groupData.imGroup.groupId;
								let groupType=groupData.imGroup.groupType;
								if(groupType==0){
									let unreadNum=groupData.groupUser.unReadNum;
									totalUnreadNum=totalUnreadNum+unreadNum;
								}
							};
							that.tabbarCount=totalUnreadNum;
							that.localGroupApi.setTabBarBadge(0,totalUnreadNum);
							that.myGroupList=data;
							//console.log("群组列表",that.myGroupList);
							that.$forceUpdate();
							uni.setStorageSync(key,JSON.stringify(that.myGroupList));
							that.dataLoading = false;
							return;
						} 
					}
					that.dataLoading = false;
					that.myGroupList = [];
					uni.removeStorageSync(key);
					that.localGroupApi.setTabBarBadge(0,0);
				}).catch(res => {
					that.dataLoading = false;
					that.globalUtil.utilAlert("加载数据异常!");
				})
				if(that.dataLoading){
					setTimeout(function(){
						that.dataLoading=false;
					},5000)
				}
			},

			//action 打开事件
			openOption(index) {
				let that=this;
				that.myGroupList[index].groupUser.showOptionFlag = true;
				that.myGroupList.map((val, idx) => {
					if (index != idx) that.myGroupList[idx].groupUser.showOptionFlag = false;
				});
			},			
			clickOption(index, index1) {
				if (index1 == 0) {
					let group= this.myGroupList[index];
					this.hiddenGroup(group);
				} 
			},
			hiddenOptionMenu(){
				let that=this;
				that.myGroupList.map((val, idx) => {
					that.myGroupList[idx].groupUser.showOptionFlag = false;
				});
			},
			//移除群聊
			hiddenGroup:function(groupInfo){
				let that=this;
				groupInfo.groupUser.unReadNum = 0;
				groupInfo.groupUser.hiddenFlag=1;
				groupInfo.groupUser.showOptionFlag=false;
				groupInfo.groupUser.readTime=that.globalUtil.getTimeStr(new Date().getTime());
				that.localGroupApi.updateMyGroupSetInfo(groupInfo,that,function(res){
					console.log("移除群组结果",res);
				});
				return;	
			},
			resetUnreadNum:function(groupInfo){
				let that=this;
				that.getMyChatGroupList();
				/* let unreadNum=groupInfo.groupUser.unReadNum;
				let groupType=groupInfo.imGroup.groupType;
				if(unreadNum>0&&groupType==0){
					that.tabbarCount=that.tabbarCount-unreadNum; 
					console.log("角标数量",that.tabbarCount);
					that.localGroupApi.setTabBarBadge(0,that.tabbarCount>0?that.tabbarCount:0);
				}; */
			}	
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.item {
			width: 750rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;

			.right {
				overflow: hidden;
				flex: 1 0;
				padding: 20rpx 26rpx 26rpx 6rpx;

				&_top {
					display: flex;
					justify-content: space-between;

					&_name {
						font-size: 28rpx;
						color: $u-main-color;
						flex: 0 0 450rpx;
						overflow: hidden;
					}

					&_time {
						font-size: 24rpx;
						color: $u-light-color;
					}
				}

				&_btm {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: $u-tips-color;
					padding-top: 10rpx;

				}
			}
		}

		.bg_view_top {
			background-color: #f1f1f1;
		}

		.bg_view {
			background-color: #ffffff;
		}

		.hidden-scroll-bar {
			::-webkit-scrollbar {
				display: none;
				height: 0;
				width: 0;
			}
		}

		.slot-wrap {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
		}

		.slot-wrap-full {
			display: flex;
			flex: 1;
			align-items: center;
			//padding: 0 30rpx; 
			text-align: center;
		}
	}
</style>
<style>
	.content .u-image__error {
		background-color: #FFFFFF !important;
	}

	page {
		background-color: #f0f0f0;
	}
</style>